/**使用less语法**/

@import url('mui.min.css');

*{margin:0 auto; padding: 0;}
ul,li{ list-style: none;}
.clear{
	clear:both;
}

/**主题色**/
@mainBgColor:#12A86B;
/**比较淡的黑色**/
@grayColor:#efeff4;
/***通用的绿色背景*/
.public-green-bgcolor{
	background: @mainBgColor;
}
/**透明背景颜色**/
.transparent-bg{
	background: transparent;
}
/**白色背景**/
.public-white-bgcolor{
	background: #fff;
}
/**通用按钮**/
/**白底绿色按钮**/
.public-white-btn{
	background: #fff;
	color: @mainBgColor;
	border:1px solid #fff; 
	padding: 10px 30px;
}
/**白框白字**/
.public-transparent-btn{
	background: transparent;
	color: #fff;
	border:1px solid #fff; 
	padding: 10px 30px;
}
/**绿底白字按钮**/
.public-g-w-btn{
	background: @mainBgColor;
	color:#fff;
	border:none;
	padding:10px 0; 
}
/**绿色边框绿文字**/
.public-g-g-btn{
	color: @mainBgColor;
	border: 1px solid @mainBgColor;
}
/**导航栏文字颜色**/
.header-txt-color a,.header-txt-color h1{
	color: #fff !important;
}
/**去掉header头部阴影**/
.header-no-shadow{
	box-shadow: none;
}
/**小文字**/
.small-txt{
	font-size:12px;
	color:#333;
}
.public-margin-top{
	margin-top:15px;
}
/**输入框的placeholder属性字体大小**/
.public-placeholder-size{
	&[placeholder]{
		font-size: 13px;
		color:#333;
	}
}
/**改变表单label和输入框之间的距离**/
.public-form-margin{
	.mui-input-row{
		label{ 
			width: 12%;
			span{
				position: relative;
				top:-4px;
			} 
		}
		input{ 
			float: left;
			margin-left:15px;
			&[placeholder]{
				font-size: 13px;
				color:#333;
			}
		}
	}
}
/**底部导航高亮的颜色**/
.mui-bar-tab .mui-tab-item.mui-active{
	color:@mainBgColor;
}
/**底部两个按钮**/
.public-bottom-button{
	height: 40px;
	width: 100%;
	position: fixed;
	background: @mainBgColor;
	bottom:0;
}
.public-bottom-button button{
	color:#fff;
}
/**背景颜色**/
.public-bgcolor1{
	background: #7788F2;
}
.public-bgcolor2{
	background: #FF8924;
}
.public-bgcolor3{
	background: #EA6644;
}
.public-bgcolor4{
	background: #F7BC61;
}
.public-bgcolor5{
	background: #F57673;
}
.public-bgcolor6{
	background: #F08FB3;
}
.public-bgcolor7{
	background: #66CCEE;
}
.public-bgcolor8{
	background: #8C3537;
}
.public-color1{
	color: #7788F2;
}
.public-color2{
	color: #FF8924;
}
.public-color3{
	color: #EA6644;
}
.public-color4{
	color: #F7BC61;
}
.public-color5{
	color: #F57673;
}
.public-color6{
	color: #F08FB3;
}
.public-color7{
	color: #66CCEE;
}
.public-color8{
	color: #8C3537;
}



/**欢迎页面**/
.welcome-logo{
	width: 100%;
	margin-top:20%;
	img{
		width:100%;
	}
}
.welcome-button{
	width: 100%;
	position: fixed;
	text-align: center;
	bottom:15%;
	button{
		margin: 0 15px;
	}
}


/**登录页面**/
.login-div{
	margin-top:35%;
	padding: 0 10px;
	form{
		&:before{
			height: 0;
		}
		.mui-input-row{
			position:relative; 
			&:after{
				background: @mainBgColor;
			}
			label span{
				color: @mainBgColor;
			}
		} 
	} 
	.login-btn{
		margin:30px 0px;
		text-align: center;
		button{
			width: 98%;
		}
	}
	p.login-a a{
		color:#999;
		padding:0 10px;
	}
}


/**注册页面**/
.register-yzm-btn{
	position: absolute;
	top:3px; right: 0;
}

/**home页面**/
.home-div{
	/**导航**/
	.home-div-nav{
		.mui-table-view-cell{
			text-align: center;
			span{ 
				color:#fff;
				width: 30px;
				line-height: 30px;
				height: 30px;
				font-size:20px;
				border-radius: 50%;
			};
			h4{
				margin-top:7px;
				font-weight: normal;
				color:#333;
				font-size:12px;
			}
		}
	}
	/**用户列表**/
	.home-div-user{
		.user-lists{
			ul{
				background:transparent;
			}
		}
	}
}
li{
	margin-top:5px;
	background: #fff;
	img{
		width: 60px;
		height: 60px;
		max-width: 60px;
		line-height: 60px;
		border-radius: 8px;
		border:1px solid #fff;
		box-shadow: 0 0 3px #444;
	}
	.mui-media-body p{
		/**昵称**/
		.nickname{
			color: #333;
		}
		/**男士图标**/
		span.span-man{
			background: #97BCF0;
			color:#fff;
			padding: 1px 5px;
			border-radius:3px;
		}
		/**女士图标**/
		span.span-girl{
			background: #F08FB3;
			color:#fff;
			padding: 1px 5px;
			border-radius:3px;
		}
		span.chaticonfont{
			font-size:10px;
		}
	}
	/**约会目的**/
	.chat_content{
		margin-top:5px;
		border-top:1px solid @grayColor;
		p.title{
			span.chaticonfont{
				font-size:20px;
			}
			span.title_content{
				color:#333;
				font-weight:bold;
			}
		}
		.content{
			font-size:14px;
			p{ 
				margin-top:2px;
				span.mui-icon{
					margin-right:10px;
					font-size:18px;
				}
			}
		}
	}
}


/**邀约详情页面**/
.detail_info-div{
	ul{
		background: transparent;
		&:before,&:after,li:after{
			height:0;
		}
		.chat_content{
			border-radius:8px;
			padding: 10px;
			background: #fff;
			border-top:none;
		}
		.detail-content{
			margin: 10px;;
			background: #fff;
			padding: 10px;
			border-radius:8px;
			text-indent: 28px;
		}
		.detail-img{
			background: #fff;
			li.mui-table-view-cell{
				text-align: center;
				img{
					width: 100px;
					height: 140px;
					max-width: none;
    				line-height: none;
				}
			}
		} 
	}
	.detail-btn-div{
		.mui-col-xs-6{
			height: 100%;
		}
		li{
			&:nth-child(1){
				border-right:1px dashed #18E492;
			}
			margin:0;
			padding: 0;
			height: 100%;
			text-align: center;
			button{
				line-height: 40px;
				padding:0;
			}
		}
	}
}


/**发布邀约**/
.release-div{
	form{
		&:before,&:after,.mui-input-row:after{
			height: 0;
		}
		label.small-txt{
			width: 30%;
			margin-top:5px;
		}
		input{
			width: 60%;
			text-align: right;
			float: right;
		}
	}
	ul{
		&:before,li.mui-table-view-cell:after{
			height: 0;
		}
		span.object{
			span{
				padding: 0 10px;
				color:#666;
				&:nth-child(2){
					
				}
			}	
			span + span{
				border-left:1px solid @grayColor;
			}
			/**点击约会对象的样式**/
			span.active{
				color:#000;
				font-weight: bold;
				font-size:14px;
			}
		}
	}
	/**接送**/
	.release-transfer{
		label{
			margin-top:2px;
		}
	}
}
/**报名说明**/
.release-shuoming{
	padding: 10px;
	textarea{
		border:none;
		height: 100px;
		overflow-y: auto;
		&[placeholder]{
			font-size:13px;
		}
	}
	input{
		&[placeholder]{
			font-size:13px;
		}
	}
	span{
		width: 50px;
		height: 50px;
		border:1px solid #d8d8d8;
		text-align: center;
		line-height: 50px;
		font-size:45px;
		color:#d8d8d8;
	}
}


/**聊天窗口**/
#chat_who{
	float:left;
	position: relative;
}
/**聊天的盒子**/
#chat_content{
	overflow-y: auto;
	bottom: 50px;
}
.chat-box{
}
.public-chat-box{
	width: 95%;
	margin-top:8px;
	p.chat-time{
		margin: 0;
		margin-top:10px;
		line-height: 25px;
		text-align: center;
		span{
			background:#d4d4d4;
			padding:2px;
			border-radius:3px;
		}
	}
	
	/**聊天内容**/
	.chat-txt{
		position: relative;
		img.avatar{
			width: 50px;
			height: 50px;
			border-radius:50% ;
			position: absolute;
			top:0; left: 0;
		}
		.public-chat-content{
			position:relative;
			max-width: 80%;
			font-size:15px;
			margin-left: 60px;
			.box-background{
				padding: 10px;
				display: inline-block;
				background: #fff;
				border-radius:8px;
			}
			span.chaticonfont{
				position: absolute;
				color:red;
				top:8px;
				font-size:30px;
				color:#fff;
				/**右边的箭头**/
				&.chat_icon-youbian{
					right: -16px;
				}
				/**左边的**/
				&.chat_icon-zuobian{
					left: -16px;
				}
			}
			span.record{
				span.mui-icon.chaticonfont{
					position: initial;
					color: @mainBgColor;
					font-size:16px;
				}
				span.mui-icon.chaticonfont.fadeout{
					display: none;
				}
				span.isplaying{
					display: none;
					font-size:13px;
				}
				span.isplaying.active{
					display: inline-block;
				}
			}
			/**聊天发的大图**/
			&.public-chat-box-bigpic{
				background: transparent;
				img.bg_pic{
					min-width: 30%;
					max-width: 80%;
				}
			}
		}
	}	
	/**右边聊天**/
	.chat-txt-right{
		img.avatar{
			left:initial;
			right:0;
		}
		.public-chat-content{
			margin-left:inherit;
			margin-right: 60px;
			.box-background{
				float: right;
				span.record{
					span.mui-icon.chaticonfont{
						color: #999;
					}
				}
			}
		}
		.public-chat-box-bigpic{
			text-align: right;
		}
	}
}
/**输入框**/
.chat-bottom-input{
	background: #fff;
	height: 40px;
	padding:0 5px;
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index:10;
	.grid{
		height: 100%;
		text-align: center;
		line-height:40px;
		span.mui-icon{
			color:#999;
		}
		
	}
	.grid.message{
			span,button{ display: none;}
			span.active,button.active{ display: inline-block;}
		}
	.mui-input-group,.mui-input-row{
		&:before,&:after{
			height:0;
		}
	}
	input{
		width: 100%;
		height: 30px;
		margin-top:5px;
		border:1px solid #999;
		border-radius: 5px;
		padding-right:30px;
	}
	input[placeholder]{
		font-size: 14px;
	}
	button{
		height: 30px;
		margin-top:5px;
		width: 90%;
		padding: 4px;
	}
}
/***声音说话盒子***/
.sound-content{
	display: none;
	position: fixed;
	text-align: center;
	width: 150px;
	height: 150px;
	z-index: 999;
	top:50%; left:50%;
	margin:-75px 0 0 -75px;
	background: rgba(68,68,68,0.9);
	border-radius:8px;
	box-shadow: 0 0 5px #E0CCD6;
	span{
		color:#fff;
	}
	span.msg-tip{
		font-size:11px;
		display: block;
	}
	span.msg-tip-text{
		display: none;
		position: absolute;
		top:10%;
		left:0; right: 0;
	}
	span.msg-tip-text.msg-tip1{
		display: block;
	}
	span.msg-tip-text.msg-tip3{
		background:#D84C29;
		margin: 0 10px;
		border-radius:5px;
	}
	span.time{
		position: absolute;
		top:45%;
		left:0; right: 0;
		span.lue{
			color:@mainBgColor;
		}
	}
	/**说话按钮**/
	span.speech_btn{
		position: absolute;
		bottom:5px;
		left:0; right: 0;
		width: 50px;
		height: 50px;
		font-size: 40px;
		line-height: 50px;
		background: @mainBgColor;
		border-radius: 50%;
	}
}


/**举报页面**/
.report-div{
	textarea{
		border:none;
		height: 100px;
		overflow-y: auto;
		&[placeholder]{
			font-size:13px;
		}
	}
	span{
		width: 50px;
		height: 50px;
		border:1px solid #d8d8d8;
		text-align: center;
		line-height: 50px;
		font-size:45px;
		color:#d8d8d8;
		margin-bottom:10px;
		margin-left:10px;
	}
	p{
		padding: 10px;
	}
}


/**筛选页面**/
.filter-div{
	form.public-margin-top{
		.mui-input-row{
			input{
				margin-right:20px;
				&[placeholder]{
					font-size:14px;
				}
			}
		}
	}
}

/**报名管理页面**/
.manage-button{
	height: 30px;
	line-height: 30px;
	button{
		&:nth-child(1){
			margin-right: 10px;
		}
		color:#fff;
		border: none;
	}
	span{
		font-size:18px;
		display: inline-block;
		width: 18px;
		height: 18px;
		text-align: center;
	}
}


/**消息页面**/
#msg-scroll-box{
	position: fixed;
	z-index: 100;
	width: 100%;
	background: #efeff4;
	display: flex;
	font-size:14px;
	.msg-span{
		position: relative;
		display: inline-block;
		height: 100%;
		line-height: 25px;
		padding:0 3px;
	}
	.msg-span.active{
		border-bottom:2px solid @mainBgColor;
		
	}
	span.msg-tip{
		width: 8px;
		height: 8px;
		display: inline-block;
		background: #FB3E44;
		border-radius:50%;
		position: absolute;
		top:2px;
		right: -3px;
		display: none;
	}
	span.msg-tip.active{
		display: block;
	}
}
.msg-nav{
	
}
.msg-nav-box{
	width: 60%;
	margin:7px auto;
	height: 30px;
	overflow: hidden;
	border-radius:8px;
	border:1px solid #fff;
	box-shadow: 0 0 5px #fff;
	span{
		display: inline-block;
		width: 50%;
		height: 100%;
		float:left;
		text-align: center;
		line-height: 30px;
		color:#fff;
	}
	span.active{
		background: #Fff;
		color:@mainBgColor;
	}
}
.msg-content{
	.home-div-user{
		top:70px;
		overflow: visible;
		display: none;
	}
	.home-div-user.active{
		display: block;
	}
}
.msg-content .user-lists li .mui-media-body div.message-tip{
	position: relative;
	overflow: hidden;
	padding-right:20px;
	span.mui-badge{
		position: absolute;
		top:0px;
		right: 0px;
	}
}
.msg-content .user-lists li .mui-media-body p.agree{
	span.mui-pull-right{
		margin-top:10px;
		button.agree{
			background: @mainBgColor;
			color:#fff;
			margin-top: -5px;
		}
	}
}
/**群聊盒子列表**/
.msg-content .home-div-user.group_chat .user-lists ul li{
	.pics9{
		width: 50px;
		height: 50px;
		overflow: hidden;
		box-shadow: 0 0 5px #666;
		border-radius:8px;
		padding:2px;
		display: flex;
		justify-content:center;
		align-items:center;
		flex-wrap: wrap;
		img{
			width: 14px;
			height: 14px;
		}
	}
	.mui-media-body{
		padding-left: 10px;
		margin-top:14px;
		p{
			font-size:16px;
		}
	}
}
/****通讯录***/
.msg-content .home-div-user.address_book ul li .mui-media-body p{
	margin-top:10px;
}

/**使用密码修改密码**/
.modify-password-div{
	.bb_num{
		line-height: 40px;
		padding:0 15px;
		span.small-txt{
			color:#777;
		}
	}
}



/**我的**/
.me-div{
	span.nickname{
		font-size: 15px;
		font-weight: normal;
	}
}
.me-list ul li a{
	span.chaticonfont{
		font-size: 18px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		margin-top:-5px;
		margin-right: 5px;
	}
}

/**发布征婚**/
.public-zh-span{
	background:#E8712F;
	color:#fff;
	padding: 3px 10px;
	border-radius:0 10px 10px 0;
	margin-bottom:10px;
	display: inline-block;
}
.release_marray-div{
	p.report-p{
		padding: 10px;
	}
	form{
		.mui-input-row{
			label{
				width: 30%;
				margin-top:4px;
			}
			input{
				float: right;
				text-align: right;
				padding-right:35px;
			}
		}
	}
}


/***他人查看你的征婚信息***/
.see_marrry-div{
	ul li.mui-table-view-cell:after{height:0;}
	.shenghuozhao{
		padding: 10px;
		img{
			border-radius:10px;
			box-shadow:0 0 10px #000;
			border: 1px solid #000;
			padding:2px;
		}
	} 
}



/**开通会员页面**/
#navigation{
	text-align: center;
	background: #fff;
	.vip1{
		padding: 10px;
		.vip-box{
			span{
				display: block;
				width: 100%;
				height: 35px;
				background: #FA6F2A;
				line-height: 35px;
				color: #fff;
			}
			p{
				margin-bottom:0;
				color:#FA6F2A;
				line-height: 30px;
			}
		}
		.active{
			border:2px solid #FA6F2A;
		}
	}
}
.vip-pay{
	margin-top:50px;
	width: 90%;
	button{
		width: 100%;
		margin-top:10px;
		background: #FA6F2A;
		color: #fff;
		border: none;
	}
	button:nth-child(1){
		background:@mainBgColor;
	}
}


/**关于我们**/
.about-div{
	text-align: center;
	margin-top:30%;
	img{
		width: 200px;
		border-radius:20px;
		margin-bottom:10px;
	}
}
.about-www{
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 0;
	p{
		line-height: 30px;
		margin: 0;
		background: rgba(0,0,0,0.7);
		color:#fff;
	}
}


/**设置页面**/
.setting-div{
	a{
		position: relative;
		span.chaticonfont{
			display: inline-block;
			position: absolute;
			font-size:20px;
			width: 25px;
			height: 25px;
			text-align: center;
			line-height: 25px;
			border-radius:50%;
			color:#fff;
			margin-top:-2px;
		}
		span.small-txt{
			margin-left:30px;
		}
	}
}


/**绑定手机页面**/
.bind_phone-div{
	form .mui-input-row{
		label{
			width: 30%;
			margin-top:4px;
		}
		input{
			float: right;
			text-align: right;
		}
	}
}
